import { Rate, message, Spin } from "antd";
import dayjs from "dayjs";
import { FC, useEffect, useState } from "react";
import styles from "../../styles.less";
import Https from "@/utils/Https";
import {
  getStyle,
  hexToRgba,
  secondsList,
  weekNameList,
} from "../../interface";
const SortCourse: FC<any> = (props) => {
  const {
    addWork,
    weekTimeList,
    venueObj,
    roomInfo,
    sortReload,
    defaultTime,
    hasFull,
  } = props;
  const [loading, setLoading] = useState(false);
  const [week, setWeek] = useState([]);
  const [scrollTop, setScrollTop] = useState(0);
  const [windowHeigth, setWindowHeight] = useState(window.innerHeight);
  //获取排课表数据
  const getData = async (venueId, defaultTime, classRoom) => {
    let params = {
      venueId,
      courseType: "2",
      classRoom,
      startTimeSlot: defaultTime.startTime,
      endTimeSlot: defaultTime.endTime,
    };
    setLoading(true);
    let res = await Https.post(
      "/course/sched/scheduleWeekRecordList",
      params,
      true
    );
    setLoading(false);
    if (res.code == 200 && res.data) {
      if (res.data.length > 0) {
        let objList = [];
        res.data.map((item) =>
          objList.push({
            week: dayjs(item.date).day() == 0 ? 7 : dayjs(item.date).day(),
            ...item,
          })
        );
        setWeek(objList);
      } else {
        setWeek([]);
      }
    } else {
      setWeek([]);
      message.error(res.msg);
    }
  };
  useEffect(() => {
    if (venueObj.id && defaultTime && roomInfo.id) {
      getData(venueObj.id, defaultTime, roomInfo.id);
    }
  }, [venueObj, defaultTime, roomInfo, sortReload]);
  const handleResize = () => {
    setWindowHeight(window.innerHeight);
  };
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return (
    <Spin spinning={loading}>
      <div
        className={styles.timaMain}
        onScroll={(e) => {
          let { scrollTop } = e.target;
          setScrollTop(scrollTop);
        }}
        style={{ height: hasFull ? windowHeigth - 90 + "px" : "500px" }}
      >
        <div
          className={`${styles.timeBox} ${
            scrollTop > 60 ? styles.strikShadow : ""
          }`}
        >
          {weekTimeList &&
            weekTimeList.length > 0 &&
            weekTimeList.map((item, index) => (
              <div className={styles.time_header} key={index}>
                {index == 0 ? (
                  "时间段"
                ) : (
                  <span>
                    {dayjs(item.date).format("MM-DD")} 周{weekNameList[index]}
                  </span>
                )}
              </div>
            ))}
        </div>
        <div className={styles.boxHidden}>
          <div className={styles.timeContent}>
            {secondsList.map((e, index) => (
              <div key={index} className={styles.timeHr}>
                <div className={styles.timeSecond}>{e}</div>
                {weekNameList.map(
                  (i, cindex) =>
                    cindex > 0 && (
                      <div key={cindex} className={styles.timeWeek}></div>
                    )
                )}
              </div>
            ))}
            {week &&
              week.length > 0 &&
              week.map(
                (e, eindex) =>
                  e.list &&
                  e.list.length > 0 &&
                  e.list.map((c, cindex) => (
                    <div
                      className={`${styles.card_resize} ${
                        c.isExpired == 1 ? styles.hasExpired : ""
                      }`}
                      style={getStyle(e, c).objStyle}
                      onClick={() => {
                        addWork("details", e, c);
                      }}
                    >
                      {c.isExpired == "0" && (
                        <div
                          className={styles.card_operate}
                          style={{
                            background: hexToRgba(c.colour, 1),
                            border: `1px solid ${hexToRgba(c.colour, 1)}`,
                          }}
                          onClick={(event) => {
                            event.stopPropagation();
                            addWork("add", e, c);
                          }}
                        >
                          预约
                        </div>
                      )}
                      <div className={styles.card_item}>
                        {dayjs(c.startTimeSlot).format("HH:mm")}~
                        {dayjs(c.endTimeSlot).format("HH:mm")}
                      </div>
                      <div className={styles.card_name}>{c.courseName}</div>
                      <div className={styles.card_teach}>
                        {c.courseCoachName}
                      </div>
                      <div className={styles.card_rate}>
                        <Rate disabled value={c.courseDifficulty} />
                      </div>
                      <div className={styles.card_tips}>
                        <span>{c.signCount}</span>
                        <span>/</span>
                        <span>{c.studentCount}</span>
                        <span>/</span>
                        <span>{c.peopleNumMax}</span>
                      </div>
                    </div>
                  ))
              )}
          </div>
        </div>
      </div>
    </Spin>
  );
};
export default SortCourse;
